<!DOCTYPE HTML>
<html class="x-admin-sm">
<head>
  <th:block th:insert="head/head :: common_head"></th:block>
  <style>
    .layui-table-body .layui-table-main tbody tr {
      height: 90px;
      line-height: 90px;
    }
    .layui-table-cell{
      text-align:center;
      height: auto;
      white-space: normal;
    }
    .layui-table qr{
      max-width:120px
    }
  </style>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <form class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
              <input class="layui-input"  autocomplete="off" placeholder="请输入活动名称" name="cxmc" id="cxmc">
            </div>
            <div class="layui-inline layui-show-xs-block">
              <select name="xmxx_id" id="xmxx_id" lay-verify="required" lay-search="">
                <option value="">所属项目</option>
              </select>
            </div>
            <div class="layui-inline layui-show-xs-block">
              <button class="layui-btn btn-query37" lay-event="query"><i class="layui-icon">&#xe615;</i></button>
            </div>
          </form>
        </div>
        <div class="layui-card-body layui-table-body layui-table-main">
          <table class="layui-table layui-form" id="query_tb" lay-filter="query_tb"></table>
          <div id="laypage"></div>
        </div>
      </div>
    </div>
  </div>
</div>

  <th:block th:insert="head/head :: common_jsfiles"></th:block>
  <script>
    /**
     * sessionStorage的时候，cxtj_session 这个参数名称，每个页面不要重复，用于缓存查询条件的值，返回页面时候需要
     * 查询页面逻辑：query_data调用post_json_table(url+"query","","数据加载中...",renderTable)
     *
     */
    //后端地址
    var url = "[[${serverUrl}]]/stamp/hd/";
    //图片显示
    var url1 = "[[${serverUrl}]]/stamp/tp/";
    var adminUrl = "[[${adminUrl}]]/";
    //每页默认大小
    var pagesize = 10;
    //当前第几页
    var curpage = 1;
    //查询条件缓存的键值名称
    var cxtj_session="stamp_hd_cxtj";
    //界面渲染
    layui.use(['table','laypage','form'], function(){
      var table = layui.table,
              form = layui.form,
              laypage = layui.laypage;

      //渲染table
      var renderTable = function(tbData){
        console.info("tbData:"+JSON.stringify(tbData));
        //渲染返回查询参数
        var options = '<option value="">所属项目</option>';
        tbData.cxtj.stampXmList.forEach(function(item) {
          options += '<option value="' + item.urlId + '">' + item.name + '</option>';
        });
        $('select[name="xmxx_id"]').html(options); // 添加选项到 select 中

        if (!is_null(tbData.cxtj.xmxx_id)){
          $("#xmxx_id").val(tbData.cxtj.xmxx_id);
        }
        form.render(); // 重新渲染

        table.render({
          data: tbData.cxjg.listInfo,
          defaultToolbar: ['filter'],
          toolbar: ['<p>',
            '<button lay-event="add" class="layui-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
            '<button lay-event="del" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe640;</i>删除</button>',
            '</p>'].join(''),
          elem: '#query_tb',
          height: 'full-173',
          page:false,
          limit: pagesize,
          even: true,
          cols: [
            [
              {field:'checkbox',align: 'center',width:'5%',title:'<input type=\'checkbox\' name=\'siam_all\' title=\'\' lay-skin=\'primary\' lay-filter=\'ck_all\'>',templet:function (d){
                  if (d.tCzyId == tbData.cxjg.userId) {
                    return '<input type="checkbox" name="ck_id" value="'+d.urlId+'" lay-skin="primary" title=" ">';
                  } else {
                    return "";
                  }
                }},
              {field: 'name', title: '所属项目',width:'8%',templet(d){
                  return d.stampXm.name;
                }},
              {field: 'name', title: '活动名称',width:'10%'},
              {field: 'name', title: '活动类型',width:'8%',templet(d){
                  return d.stampHdLx.name;
                }},
              {field: 'zdxdsl', title: '最大下单数量',width:'5%'},
              {field: 'id',align:'center',title: '首页列表展示图片',width:'8%',templet(d){
                  var dz = url1+"hdzs?id="+d.urlId;
                    return "<image class='hdzs' src="+dz+"></image>";
                }},
              {field: 'id',align:'center',title: '制作完成展示页背景图片',width:'8%',templet(d){
                  var dz = url1+"hdbj?id="+d.urlId;
                  return "<image class='hdbj' src="+dz+"></image>";
                }},
              {field: 'id',align:'center',title: '明信片横版相框图片',width:'6%',templet(d){
                  if (d.stampHdLx.id=="1"){
                    var dz = url1+"hbxk?id="+d.urlId;
                    return "<image class='hdbj' src="+dz+"></image>";
                  }else{
                    return "";
                  }
                }},
              {field: 'id',align:'center',title: '明信片竖版相框图片',width:'6%',templet(d){
                  if (d.stampHdLx.id=="1"){
                    var dz = url1+"sbxk?id="+d.urlId;
                    return "<image class='sbbj' src="+dz+"></image>";
                  }else{
                    return "";
                  }
                }},
              {field: 'id',align:'center',title: '个性化模版图片',width:'6%',templet(d){
                  var dz = url1+"gxhmb?id="+d.urlId;
                  if (d.stampHdLx.id=="2") return "<image class='gxhmb' src="+dz+"></image>";
                  else return "";
                }},
              {field: 'id',align:'center',title: '个性化相框图片',width:'6%',templet(d){
                  var dz = url1+"gxhxk?id="+d.urlId;
                  if (d.stampHdLx.id=="2") return "<image class='gxhxk' src="+dz+"></image>";
                  else return "";
                }},
              {field: 'id',align:'center',title: '个性化定位图',width:'6%',templet(d){
                  var dz = url1+"dwt?id="+d.urlId;
                  if (d.stampHdLx.id=="2") return "<image class='dwt' src="+dz+"></image>";
                  else return "";
                }},
              {field: 'id',align:'center',title: '预览',width:'6%',templet(d){
                  if (d.stampHdLx.id=="1") {
                    return "<span style=\"cursor: pointer\" onclick=\"mxpyl('"+d.urlId+"','1')\">[竖版预览]</span> <span style=\"cursor: pointer\" onclick=\"mxpyl('"+d.urlId+"','2')\">[横版预览]</span>";
                  }
                  else {
                    return "<span style=\"cursor: pointer\" onclick=\"gxhyl('"+d.urlId+"')\">[个性化预览]</span>";
                  }
                }},
              {field: 'id',title: '操作', align: 'center',templet(d){
                  var str="";
                  str+="    <button type=\"button\" class=\"layui-btn layui-btn-warm\" lay-event=\"mbgl\">模版管理</button>"
                  str+= "    <button type=\"button\" class=\"layui-btn layui-btn-normal\" lay-event=\"edit\"><i class=\"layui-icon layui-icon-edit\"></i>修改</button>";
                  if (d.tCzyId == tbData.cxjg.userId)
                    str+= "    <button type=\"button\" class=\"layui-btn layui-btn-danger\" lay-event=\"del\"><i class=\"layui-icon layui-icon-delete\"></i>删除</button>";
                  else{
                    str+= "    <button type=\"button\" class=\"layui-btn layui-btn-disabled\"><i class=\"layui-icon layui-icon-delete\"></i>删除</button>";
                  }
                  return str;
                }}
            ]
          ],
          done: function(res, curr, count){
            var zsl=0;
            if (!is_null(tbData.cxjg.pageInfo)) zsl = tbData.cxjg.pageInfo.total;
            //执行一个laypage实例
            laypage.render({
              elem:'laypage'
              ,count:zsl
              ,curr:curpage
              ,limit:pagesize
              ,limits: [10, 20, 30, 40]
              ,layout: ['prev', 'page', 'next', 'skip','count','limit']
              ,jump:function (obj,first) {
                if(!first){
                  curpage = obj.curr;
                  pagesize = obj.limit;
                  query_data();
                }
              }
            });
            //渲染提示？
          }
        });
      }

      /* 表格内容里面的工具条点击事件 */
      table.on('tool(query_tb)', function (obj) {
        if ('edit' === obj.event) {
          set_query_json();
          xadmin.goto('修改数据',"info?id="+obj.data.urlId+"&lx=1");
        } else if ('del' === obj.event) {
          set_query_json();
          do_del(obj);
        } else if ('mbgl' === obj.event) {
          xadmin.open('模版管理',"mbquery?hd_id="+obj.data.urlId);
        }
      });
      table.on('toolbar(query_tb)', function (obj) {
        if ('add' === obj.event) { // 添加
          set_query_json();
          xadmin.goto('添加数据','info?lx=0');
        } else if ('del' === obj.event) {
          set_query_json();
          // /* 表格头部的工具栏点击事件 */
          var ids = "";
          $.each($("input[name=ck_id]:checked"), function (i, value) {
            ids += $(this).attr("value")+",";  // 如果需要获取其他的值 需要在模板中把值放到属性中 然后这里就可以拿到了
          });
          if (ids==""){
            return layer.msg('请选择要删除的数据', {icon: 2, anim: 6});
          }
          do_del({ids: ids});
        }
      });
      //全选
      form.on("checkbox(ck_all)", function () {
        var status = $(this).prop("checked");
        $.each($("input[name=ck_id]"), function (i, value) {
          $(this).prop("checked", status);
        });
        form.render();
      });
      //数据查询
      function query_data(){
        var xmxx_id;
        //如果有缓存，用缓存查询一次，然后清空缓存！
        let str = sessionStorage.getItem(cxtj_session);
        if (!is_null(str)){
          let str_json = JSON.parse(str);
          $("#cxmc").val(str_json.cxmc);
          xmxx_id = str_json.xmxx_id;
          curpage=str_json.curpage;
          pagesize=str_json.pagesize;

          sessionStorage.setItem(cxtj_session,"");
        }
        //特殊处理select，因为返回时，还未渲染数据
        if (is_null(xmxx_id)) xmxx_id = $("#xmxx_id").val();

        //调用查询接口，准备发送的参数
        let jsonData = {
          cxmc: $("#cxmc").val(),
          xmxx_id: xmxx_id,
          curpage: curpage,
          pagesize: pagesize,
          timestamp:new Date().getTime()
        };

        //查询参数加密
        let sendStr = {
          data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
        };
        //开始查询
        post_json_table(url+"query",JSON.stringify(sendStr),"数据加载中...",renderTable);
      }

      //监听查询按钮事件
      $(document).on('click', '[lay-event]', function(obj){
        var eventName = $(this).attr('lay-event'); // 获取事件名称
        if(eventName === 'query'){
          curpage=1;
          query_data();
          return false;
        }
      });

      //执行查询
      query_data();

    });
    //保存查询条件到缓存
    function set_query_json(){
      let jsonData = {
        cxmc: $("#cxmc").val(),
        xmxx_id: $("#xmxx_id").val(),
        curpage: curpage,
        pagesize: pagesize,
        timestamp:new Date().getTime()
      }
      sessionStorage.setItem(cxtj_session,JSON.stringify(jsonData));
    }
    //删除
    function do_del(obj) {
      var ids;
      if (obj.ids) {  // 批量删除
        ids = obj.ids;
      } else {  // 单个删除
        ids = obj.data.urlId;
      }
      if(!confirm("是否确定删除数据？")) return;
      var jsonData = {
        ids: ids
      };
      var sendStr = {
        data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
      };
      post_json_token(url+"del",JSON.stringify(sendStr),"数据删除中...");
    }
    //回调
    function on_result(result)
    {
      if (result.code==0)
      {
          window.location.reload();
      }
      else if (result.code==9)
      {
        layer.msg(result.msg, { time: 2000 }, function() {
        });//失败时只提示信息，不关闭弹出层且不刷新父页
      }
      else
      {
        layer.msg(result.msg, { time: 2000 }, function() {
          window.location.reload();
        });//失败时只提示信息，不关闭弹出层且不刷新父页
      }
    }
    function mxpyl(id,lx){
      // iframe 层
      layer.open({
        type: 2,
        title: '页面预览',
        shadeClose: true,
        shade: 0.8,
        area: ['480px', '80%'],
        content: adminUrl+"h5/card/add_yl?id="+id+"&lx="+lx+""
      });
    }

    function gxhyl(id){
      // iframe 层
      layer.open({
        type: 2,
        title: '页面预览',
        shadeClose: true,
        shade: 0.8,
        area: ['500px', '80%'],
        content: adminUrl+"h5/card/gxh_add_yl?id="+id+""
      });
    }

  </script>
</body>
</html>